/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from "react";
import { connect } from "dva";
import { Form, Modal } from "antd";
import StatisticalData from "./StatisticalData";

@connect(({ loading, submissionRecords }) => ({
  orderDetail: submissionRecords.orderDetail
}))
@Form.create()
export default class SmsList extends Component {
  state = {
    visible: false,
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  RenderSpan = (label, value, style, index) => {
    const flagArray = value instanceof Array;
    const Fstyle = flagArray ? { margin: "20px 0 0 75px" } : { margin: "20px 0" };
    return (
      <div style={Fstyle} key={index}>
        <span>{label}</span>
        <span style={style}>{flagArray ? value.join(" ") : value}</span>
      </div>
    );
  };

  ModalSpan = (params) => {
    return (
      <>
        <div>{this.RenderSpan("订单状态 ：", params.status_desc, { color: "#f79767" }, 1)}</div>
        <div>{this.RenderSpan("订单编号 ：", params.id, {}, 2)}</div>
        <div>{this.RenderSpan("揽件码 ：", params.pickup_code, {}, 3)}</div>
        <div>{this.RenderSpan("订单来源 ：", params.channel_desc, {}, 4)}</div>
        <div>{this.RenderSpan("创建时间 ：", params.create_at, {}, 5)}</div>
        <div>{this.RenderSpan("面单信息 ：", params.waybill_no, {}, 6)}</div>
        <div>
          {this.RenderSpan(
            "发件人 ：",
            [params.shipper_name, params.shipper_mobile, params.shipper_province+params.shipper_city+params.shipper_district+params.shipper_address],
            {},
            7
          )}
        </div>
        <div>
          {this.RenderSpan(
            "收件人 ：",
            [params.shipping_name, params.shipping_mobile, params.shipping_province+params.shipping_city+params.shipping_district+params.shipping_address],
            {},
            8
          )}
        </div>
        <div>{this.RenderSpan("物品 ：", [params.package_info], {}, 9)}</div>
        <div>{this.RenderSpan("重量 ：", [params.package_weight], {}, 10)}</div>
        <div>
          {this.RenderSpan(
            "实名状态 ：",
            params.is_realname_desc ,
            {},
            11
          )}
        </div>
      </>
    );
  };

  render() {
    const columns = [
      {
        title: "日期",
        key: 'create_time',
        dataIndex: "create_time",
      },
      {
        title: "驿站名称",
        key: "from_kb_name",
        dataIndex: "from_kb_name",
      },
      {
        title: `订单编号`,
        key: "order_id",
        dataIndex: "order_id",
        render: (text, record) => {
          return (
            <a
              onClick={() => {
                const { dispatch } = this.props;
                dispatch({
                  type: "submissionRecords/getOrderDetail",
                  payload: {
                    order_id: record.order_id,
                  },
                  then: () => {
                    this.setState({
                      visible: !this.state.visible,
                    });
                  },
                });
              }}
            >
              {text}
            </a>
          );
        },
      },
      {
        title: "订单金额",
        key: "freight",
        dataIndex: "freight",
        render: (text,record)=>(
          <div>
            {text}<span>元</span>
          </div>
        )        
      },
    ];
    const { visible } = this.state;
    const { orderDetail } = this.props;

    return (
      <div className="PostExpress">
        <div>
          <StatisticalData
            columns={columns}
            down="sms"
          />
        </div>
        <Modal onCancel={this.handleCancel} centered visible={visible} width={800} footer={false}>
          {this.ModalSpan(orderDetail)}
        </Modal>
      </div>
    );
  }
}
